<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },

    chartData: {
        type: Array<any>,
        default: false
    },
    chartTitle: {
        type: String,
        default: ''
    }



});

const data = reactive(props.chartData)


let myChart: any = null

let sum = ref(123) // 总数

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    //  基于准备好的dom，初始化echarts实例
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        // graphic: [],
        tooltip: {
            trigger: "item",
            formatter: "{b} : {c}  {d}%",
        },
        toolbox: {
            show: true,
        },
        legend: {
            show: true,
            orient: 'horizontal',
            // type: 'scroll',
            align: 'auto',
            right: '0%',
            bottom: '0%',
            itemGap: 10,
            textStyle: {
                color: '#fff',
                fontSize: 10,
            },
            data: data.map(v => v.name)
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 2,
                    borderWidth: 2,
                    color: function (params: any) {
                        const colorList = [
                            {
                                c1: '#086EFF',
                                c2: '#0578FF',
                            },
                            {
                                c1: '#02E7C8',
                                c2: '#07BA75',
                            },
                            {
                                c1: '#C4A9E7',
                                c2: '#9270CA',
                            },
                            {
                                c1: '#FFD8B8',
                                c2: '#FF9D4D',
                            },
                            {
                                c1: '#026DB2',
                                c2: '#12FEE0',
                            },
                            {
                                c1: '#6DD400',
                                c2: '#44D7B6',
                            },
                            {
                                c1: '#5C64FF',
                                c2: '#6988F8',
                            },
                            {
                                c1: '#2DE1FD',
                                c2: '#0E5FFF',
                            },
                            {
                                c1: '#7c94e7',
                                c2: '#1e2783',
                            }
                        ];
                        // console.log(colorList[params.dataIndex])
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: colorList[params.dataIndex].c1,
                            },
                            {
                                offset: 1,
                                color: colorList[params.dataIndex].c2,
                            }
                        ])
                    },
                },

                emphasis: {
                    label: {
                        show: true,
                        formatter: "{c}",
                        position: 'outside',
                        color: "#66FFFF",
                    },
                },

                labelLine: {
                    show: true, //显示引导线
                    length: 5, //连接饼图第1段线条的长度 length length2 不写自适应
                    length2: 5, //链接饼图第2段线条长度
                    smooth: true, //是否光滑连接线
                },

                // label: {
                //     show: true,
                //     position: 'outside'
                // },

                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: '20',
                //         fontWeight: 'bold',
                //         formatter: (params: any) => {
                //             return '{a|' + params.name + '}\n{b|' + params.value + '}'
                //         },
                //         rich: {
                //             a: {},
                //             b: {}
                //         }
                //     }
                // },

                data: data
            }
        ]
    };
    // console.log('chartTitle', props.chartTitle)
    if (props.chartTitle == '售出商品分类') {
        Object.assign(option, {
            "graphic": [{
                type: 'group',
                left: 'center',
                top: '45%',
                children: [{
                    type: 'text',
                    z: 100,
                    left: '10',
                    top: 'middle',
                    style: {
                        fill: '#fff',
                        text: sum.value,
                        font: '12px Microsoft YaHei'
                    }
                }]
            }, {
                type: 'group',
                left: 'center',
                top: '55%',
                children: [{
                    type: 'text',
                    z: 100,
                    left: '10',
                    top: 'middle',
                    style: {
                        fill: '#fff',
                        text: `总计 / 件`,
                        font: '10px Microsoft YaHei'
                    }
                }]
            }]
        });
    }
    option && myChart.setOption(option);

    // let currentIndex = 0;
    // let timer: any = 0;

    // const animate = () => {
    //     timer = setInterval(function () {
    //         var dataLen = option.series[0].data.length;
    //         // 取消之前高亮的图形
    //         myChart.dispatchAction({
    //             type: 'downplay',
    //             seriesIndex: 0,
    //             dataIndex: currentIndex,
    //         });
    //         currentIndex = (currentIndex + 1) % dataLen;
    //         // 高亮当前图形
    //         myChart.dispatchAction({
    //             type: 'highlight',
    //             seriesIndex: 0,
    //             dataIndex: currentIndex,
    //         });
    //     }, 2500);
    // }
    // // animate();
    // myChart.on("mouseover", function (e: any) {
    //     clearInterval(timer);
    //     // 取消之前高亮的图形
    //     myChart.dispatchAction({
    //         type: 'downplay',
    //         seriesIndex: 0,
    //     });
    //     myChart.dispatchAction({
    //         type: 'highlight',
    //         dataIndex: e.dataIndex
    //     });
    // });

    // myChart.on("mouseout", function (e: any) {
    //     currentIndex = e.dataIndex;
    //     // animate();
    // });
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>